<template>
	<view style="padding:30rpx 70rpx;">
		
		<!-- 就业信息表单 -->
		<view>	
			<u--form
			labelPosition="left"
			labelWidth="auto"
			:model="employmenInfo"
			:errorType="errorType"
			ref="uForm">
					
						<u-form-item
						label="就业城市:"
						prop="employmenAddressName"
						borderBottom
						:required="true"
						ref="item1">
						
							<!-- <u--input
							v-model="employmenInfo.employmenAddress"
							border="none"></u--input> -->
							
							<!-- 就业城市选择器 -->
							<picker style="margin-left: 50rpx;" class="picker" mode="multiSelector" :range="region" 
									range-key="label" :value="regionIndex" @change="pickerChange"
									@columnchange="pickerColumnchange">
									<view class="uni-form-item">
										<input type="text" class="input select"
										 v-model="employmenInfo.employmenAddressName" name="region" :disabled="true"
										placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请选择就业所在城市" />
										<text class="iconfont icon-xiangxia"></text>
									</view>
							</picker>
							<!-- <picker class="picker" mode="multiSelector" :range="region" 
									range-key="label" :value="regionIndex" @change="pickerChange"
									@columnchange="pickerColumnchange">
									<view class="uni-form-item">
										<input type="text" class="input select"
										 v-model="regionStr" name="region" :disabled="true"
										placeholder-style="color: #A7A7A7;" placeholder="请选择用工所在地址" />
										<text class="iconfont icon-xiangxia"></text>
									</view>
							</picker> -->

							
						</u-form-item>
						
						<u-form-item
						label="入职公司:"
						prop="employmenEnterprise"
						borderBottom
						required
						ref="item1">
						
							<u--input
							v-model="employmenInfo.employmenEnterprise"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写入职公司"
							style="margin-left: 50rpx;"></u--input>
							
						</u-form-item>
						
						<u-form-item
						label="职位:"
						prop="employmenPosition"
						borderBottom
						required
						ref="item1">
						
							<u--input
							v-model="employmenInfo.employmenPosition"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写职位"
							style="margin-left: 110rpx;"></u--input>
							
						</u-form-item>
						
						<u-form-item
						label="offer:"
						prop="offer"
						borderBottom
						required
						ref="item1">
						
							<u--input
							v-model="employmenInfo.offer"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写offer"
							style="margin-left: 100rpx;"></u--input>
							
						</u-form-item>
						
						<u-form-item
						label="试用薪资:"
						prop="probationSalary"
						borderBottom
						required
						ref="item1">
						
							<u--input
							v-model="employmenInfo.probationSalary"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写试用薪资"
							style="margin-left: 50rpx;"></u--input>
							
						</u-form-item>
						
						<u-form-item
						label="薪资:"
						prop="employmenSalary"
						borderBottom
						required
						ref="item1">
						
							<u--input
							v-model="employmenInfo.employmenSalary"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写薪资"
							style="margin-left: 110rpx;"></u--input>
							
						</u-form-item>
						
						<u-form-item
						label="待遇:"
						prop="employmenTreatment"
						borderBottom
						required
						ref="item1">
						
							<!-- <u--input
							v-model="employmenInfo.employmenTreatment"
							border="none"
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写待遇"
							style="margin-left: 110rpx;"></u--input> -->
							
							<uni-easyinput 
							type="textarea" 
							autoHeight 
							v-model="employmenInfo.employmenTreatment" 
							placeholder-style="color: #A7A7A7;font-size:14px;" placeholder="请填写待遇"></uni-easyinput>
							
						</u-form-item>
						
						<u-form-item
						label="入职时间:"
						prop="employmenTime"
						borderBottom
						required
						ref="item1">
						
						
							<!-- <u--input
							v-model="employmenInfo.employmenTime"
							border="none"></u--input> -->
							
							<uni-datetime-picker style="margin-left: 50rpx;" 
							v-model="employmenInfo.employmenTime"
							:border="false"/>
							
							
							
						</u-form-item>
						
						<u-form-item
						label="入职结果:"
						prop="employmenResultName"
						borderBottom
						required
						@click="showEmploymenResult = true"
						ref="item1">
						
								
								<u--input
									v-model="employmenInfo.employmenResultName"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择入职结果"
									border="none"></u--input>
												
									<u-icon
									slot="right"
									name="arrow-right"></u-icon>
												
								
								
						</u-form-item>
						
						<u-button
						 type="primary"
						 @click="submit()">
						 提交
						</u-button>
						<!-- {{employmenInfo}} -->
			</u--form>
		</view>	
		
		
		
		<!-- 入职结果选择器 -->
		<view>
			<u-action-sheet
			:show="showEmploymenResult"
			:actions="employmenResults"
			cancelText="取消"
			@close="showEmploymenResult = false"
			@select="emplomenResultSelect">
			</u-action-sheet>
		</view>
		
			
				
		<!-- 消息提示 -->
		<view>
			<u-toast ref="uToast"></u-toast>
		</view>
		
	</view>
</template>

<script>
	import { regionData} from 'element-china-area-data'
	import Area from './utils/Area.js'
	export default {
		data() {
			return {
				/* 地址选择器 */
				region:'',
				genderStr:'',
				regionData:regionData,
				region: [[],[],[]],
				regionIndex: [0, 0, 0],
				regionStr: '',
				address: '',
				
				stuId:'',
				
				employmenInfo:{//就业信息数据
					employmenAddress:'',
					employmenAddressName:'',
					employmenEnterprise:'',
					employmenPosition:'',
					offer:'',
					probationSalary:'',
					employmenSalary:'',
					employmenTreatment:'',
					employmenTime:'',
					employmenResult:'',
					employmenResultName:'',
					
				},
				/* 入职结果选择器 */
				showEmploymenResult:false,
				employmenResults: [
					{
						name: '成功',
						value:1,
					},
					{
						name: '失败',
						value:0,
					}
				],
				messageInfo:{//消息提示
					type: 'success',						
					message: "提交成功",
					position:'top'
				},
				errorType: 'message',//表单验证提示信息的方式类型
				rules:{//表单规则
					'employmenAddress':  [
							{
								required: true,
								message: '请填写就业城市',
								trigger: ['blur', 'change']
							}
					],
					'employmenEnterprise':  [
							{
								required: true,
								message: '请填写入职公司',
								trigger: ['blur', 'change']
							}
					],
					'employmenPosition':  [
							{
								required: true,
								message: '请填写职位',
								trigger: ['blur', 'change']
							}
					],
					'offer':  [
							{
								required: true,
								message: '请填写offer',
								trigger: ['blur', 'change']
							}
					],
					'probationSalary':  [
							{
								required: true,
								message: '请填写试用薪资',
								trigger: ['blur', 'change']
							}
					],
					'employmenSalary':  [
							{
								required: true,
								message: '请填写薪资',
								trigger: ['blur', 'change']
							}
					],
					'employmenTreatment':  [
							{
								required: true,
								message: '请填写待遇',
								trigger: ['blur', 'change']
							}
					],
					'employmenTime':  [
							{
								required: true,
								message: '请填写入职时间',
								trigger: ['blur', 'change']
							}
					],
					'employmenResultName': [
							{
								required: true,
								message: '请选择入职结果',
								trigger: ['blur', 'change']
							}
					]
				},
				Urls:{
					showEmployInfoByStuId:'/employmen/employmenInformation/showEmployInfoByStuId',//展示学生就业信息
					updateEmplomenInfoByStuId:'/employmen/employmenInformation/updateEmplomenInfoByStuId',//学生更新自己的就业信息
				}
			}
		},
		created(){
			
					this.pcaData = new Area();//就业城市选择器的数据  填充
			
					this.region[0] = this.regionData
					this.region[1] = this.regionData[0].children
					this.region[2] = this.regionData[0].children[0].children
					
					
					
		},
		onLoad(option){
			this.stuId = option.stuId
			console.log(this.stuId)
		},
		onReady() {
					// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
					this.$refs.uForm.setRules(this.rules)
		},
		onShow(){
			this.showEmployInfoByStuId();
		},
		methods:{
			/* 地区选择器 */
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].label + ' ' + this.region[1][this.regionIndex[1]].label + ' ' +
					this.region[2][this.regionIndex[2]].label;
				this.address = this.region[0][this.regionIndex[0]].label + 
							this.region[1][this.regionIndex[1]].label +
							this.region[2][this.regionIndex[2]].label+'';
				console.log('编号',this.region[0][this.regionIndex[0]].value, 
				this.region[1][this.regionIndex[1]].value, 
				this.region[2][this.regionIndex[2]].value);
					
				console.log(this.region[2][this.regionIndex[2]].value);
				
				this.employmenInfo.employmenAddress=this.region[2][this.regionIndex[2]].value;
				this.employmenInfo.employmenAddressName = this.getPcaText(this.employmenInfo.employmenAddress);
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					this.$set(this.region, 1, this.regionData[e.detail.value].children);
					this.$set(this.region, 2, this.regionData[e.detail.value].children[0].children);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					this.$set(this.region, 2, this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].children);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}

				
			},
			
			/* 就业信息编辑的回显 */
			showEmployInfoByStuId(){
				console.log(this.Urls.showEmployInfoByStuId)
				console.log(this.stuId)
				this.$axios.post(this.Urls.showEmployInfoByStuId+"?stuId="+this.stuId).then(res=>{
					console.log(res)
					if(res.data.success){
						this.employmenInfo=res.data.result;
						
						//回显就业城市
						
						this.employmenInfo.employmenAddressName=this.getPcaText(this.employmenInfo.employmenAddress);
						
						
						//回显入职结果
						if(this.employmenInfo.employmenResult==1){
							this.employmenInfo.employmenResultName='成功';
						}
						
						if(this.employmenInfo.employmenResult==0){
							this.employmenInfo.employmenResultName='失败';
						}
					}
					
				});
			},
			
			/* 就业城市  编号反推字符串 */
			getPcaText(code){
			       return this.pcaData.getText(code);
			},
			
			/* 睡眠方法 */
			sleep (time) {
			  return new Promise((resolve) => setTimeout(resolve, time));
			},
			
			showToast(params) {//提交成功消息提示
				this.$refs.uToast.show({
					...params
				})
			},
			
			/* 入职结果选择 */
			emplomenResultSelect(e) {
			this.employmenInfo.employmenResult = e.value;
			this.employmenInfo.employmenResultName = e.name;
			//this.$refs.form1.validateField('userInfo.sex')
			},
			
			
			
			
			/* 就业信息表单提交 */
			submit() {
						this.$refs.uForm.validate().then(res => {
								console.log('验证通过');
								//uni.$u.toast('校验通过')
							this.$axios.post(this.Urls.updateEmplomenInfoByStuId,this.employmenInfo).then(res=>{
								console.log(res)
								if(res.data.success){
									this.showToast(this.messageInfo);
									this.sleep(2000).then(() => {
										uni.navigateTo({
											url: '/pages/service/employmentservice/employmenInformation/employmenInformation?stuId='+this.stuId
										});
									});
								}
								

								
							});
								
						}).catch(errors => {
							console.log('校验失败');
								//uni.$u.toast('校验失败')
						})
			},
			
		}	
	}
</script>

<style>

</style>
